<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ABC 权限管理系统</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/adminLogin.css">
</head>
<body>
<div class="wrap">
    <img src="/images/back.jpg" class="imgStyle">
    <div class="loginForm">
        <form>
            <div class="logoHead">
                <h2 style="margin-top: 15px">ABC 权限管理系统</h2>
            </div>
            <div class="usernameWrapDiv">
                <input id="type" name="type"  type="hidden" value="1">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="username" value="scott" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="password" value="123456">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" type="text" name="code" placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <img id="loginCode" class="layui-input codeInput">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="submitLabel">
                    <label>没有账号？<a href="#" id="loginRegister">点击注册</a></label>
                </div>
                <div class="submitDiv">
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/layui/layui.js" type="text/javascript"></script>
<script src="/js/core.util.js" type="text/javascript"></script>
<script>
    layui.use(['layer','jquery','form'],function () {
        var  $= layui.jquery;
        var layer = layui.layer;

        $(function () {
            // 页面初始化生成验证码
            window.onload = createCode('#loginCode');
            // 验证码切换
            $('#loginCode').click(function () {
                createCode('#loginCode');
            });
            // 登陆事件
            $('#loginBtn').click(function () {
                login();
            });
            // 注册事件
            $('#loginRegister').click(function () {
                register();
            });
        });
        // 生成验证码
        function createCode(codeID) {
            $('#loginCode').attr("src", "/images/captcha?data=" + new Date().getTime());
        }
        // 校验验证码、用户名、密码是否为空
        function validateCode() {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var loginCard = $('#loginCard').val();
            if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
                layer.alert("用户名不能为空");
                return false;
            }
            if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
                layer.alert("密码不能为空");
                return false;
            }
            if ($.trim(loginCard) == '' || $.trim(loginCard).length<=0){
                layer.alert("验证码不能为空");
                return false;
            }
            return true;
        }
        // 登录流程
        function login() {
            if (!validateCode()){
                //阻断提示
            }else {
                var loginUsername = $('#loginUsername').val();
                var loginPassword = $('#loginPassword').val();
                var loginCard = $('#loginCard').val();
                var type = $('#type').val();
                var params = {};
                params.username = loginUsername;
                params.password = loginPassword;
                params.code = loginCard;
                params.type = type;
                var loginLoadIndex = layer.load(2);
                $('#loginBtn').val("正在登录...");
                CoreUtil.sendAjax('/login',JSON.stringify(params),function (res) {
                    if(res.code!=0){
                        layer.msg(res.msg,{time: 1500},function () {
                            layer.close(loginLoadIndex);
                            $('#loginBtn').val("登录");
                            window.location.href="/index/login";
                        });
                    }else {
                        layer.msg(res.msg);
                        layer.close(loginLoadIndex);
                        CoreUtil.setData("access_token",res.data.accessToken);
                        CoreUtil.setData("refresh_token",res.data.refreshToken);
                        window.location.href="/index/home";
                    }
                },"POST",null,function (res) {
                    layer.msg(res.msg,{time: 1500},function () {
                        layer.close(loginLoadIndex);
                        window.location.href="/index/login";
                    });
                });
            }

        }
        // 注册流程
        function register() {
            layer.open({
                type:'1',
                content:$('.registerPage'),
                title:'注册',
                area:['430px','400px'],
                btn:['注册','重置','取消'],
                closeBtn:'1',
                btn1:function (index,layero) {
                    //注册回调
                    layer.close(index);
                    var registerUsername = $('#registerUsername').val();
                    var registerPassword = $('#registerPassword').val();
                    var registerWellPassword = $('#registerWellPassword').val();
                    var params = {};
                    params.registerUsername = registerUsername;
                    params.registerPassword = registerPassword;
                    params.registerWellPassword = registerWellPassword;
                    var registerLoadIndex = layer.load(2);
                    CoreUtil.sendAjax('/register',JSON.stringify(params),function (res) {
                        if(res.code!=0){
                            layer.close(registerLoadIndex);
                            layer.msg(res.msg);
                        }else {
                            layer.close(registerLoadIndex);
                            layer.msg(res.msg);
                        }
                    },"POST",null,function (res) {
                        layer.msg(res.msg,{time: 1000},function () {
                            layer.close(registerLoadIndex);
                            window.location.href="/index/login";
                        });
                    });
                },
                btn2:function (index,layero) {
                    //重置回调
                    var registerUsername = $('#registerUsername').val("");
                    var registerPassword = $('#registerPassword').val("");
                    var registerWellPassword = $('#registerWellPassword').val("");
                    // 防止注册页面关闭
                    return false;
                },
                btn3:function (index,layero) {
                    //取消回调
                }
            })
        }
    });
</script>

</body>
<div class="registerPage">
    <div class="registerDiv">
        <form>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="registerUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>确认密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerWellPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>
        </form>
    </div>
</div>
</html>